import type { FC, ReactNode } from 'react'
import React, { memo, useState } from 'react'
import { FormInstance, Input, Switch, Tag } from 'antd'
import { IMyFormProps } from '@/base-ui/base-form/type'
import { IContentConfig } from '@/components/page-content/type'
import { ActionDesc } from '@/global/constant'
import confirmModal from '@/utils/confirm-modal'
import { fetchPageDeleteAction } from '@/store/module/main/page-common'
import usePageSearch from '@/hooks/use-page-search'
import usePageModal from '@/hooks/use-page-modal'
import usePageContent from '@/hooks/use-page-content'
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import VerifyCodeButton from '@/components/verify-code-button'
import consumeSearch from './config/consume-search'
import consumeContent from './config/consume-content'
import obtainSearch from '@/views/main/c-views/integral/detail-list/config/obtain.search'
import obtainContent from '@/views/main/c-views/integral/detail-list/config/obtain-content'

interface IProps {
  children?: ReactNode
}

const inputWithVerifyCodeStyle = {
  display: 'flex',
  alignItems: 'center'
}

const IntegralDetailList: FC<IProps> = (props) => {
  // 用下面的状态来区分度当前是哪个搜索表单配置，哪个内容配置
  const [currentSearch, setCurrentSearch] =
    useState<IMyFormProps>(consumeSearch)
  const [currentContent, setCurrentContent] =
    useState<IContentConfig>(consumeContent)
  const [isConsume, setIsConsume] = useState(true)

  // 通用：modal的确定与取消：主要事件，
  const okCb = async (form: FormInstance | undefined) => {
    // 获取当前配置的信息，看一下是属于什么类型的表单描述
    const { desc } = curModalConfig.formProps
    // 获取表单数据
    const values = form?.getFieldsValue()
    if (desc === ActionDesc.SecondAuth) {
      /** 1、当前描述为：二次认证 **/
      return toSecondAuth(values)
    }
  }

  const { pageContentRef, searchClick, resetClick } = usePageSearch()
  const { pageModalRef, onModalOk, onModalCancel, getCodeClick } = usePageModal(
    { okCb }
  )
  const {
    modal: [curModalConfig],
    dispatch,
    toSecondAuth,
    handleSecondAuth
  } = usePageContent({ pageModalRef })

  const actionClick = (actionType: any, record?: any) => {
    if (actionType === ActionDesc.Delete) {
      /** 删除 **/
      handleSecondAuth(() => {
        confirmModal('是否删除该数据?').then(() =>
          dispatch(fetchPageDeleteAction(record.integralDetailId))
        )
      })
    }
  }

  // 积分消费和积分获取两个列表的切换
  const onListChange = (checked: boolean) => {
    if (checked) {
      // checked:true 开启状态,积分消费
      setCurrentSearch(consumeSearch)
      setCurrentContent(consumeContent)
    } else {
      // checked:false 关闭状态,积分获取
      setCurrentSearch(obtainSearch)
      setCurrentContent(obtainContent)
    }
    setIsConsume(checked)
  }

  // 通用：自定义内容--自定义的内容区头部
  const headerRightArea = (
    <Switch
      checkedChildren="积分消费"
      unCheckedChildren="积分获取"
      checked={isConsume}
      onChange={onListChange}
    ></Switch>
  )
  // 通用：自定义表格内容--渲染自定义的表单项
  const renderTableCpn = (
    text: string | number,
    record: any,
    customkey = ''
  ) => {
    switch (customkey) {
      case 'consumeChannelName':
        return <Tag color="processing">{text}</Tag>
      case 'channelName':
        return <Tag color="success">{text}</Tag>
      default:
        return <span>{text}</span>
    }
  }
  return (
    <>
      <PageSearch
        config={currentSearch}
        searchClick={searchClick}
        resetClick={resetClick}
      />
      <PageContent
        ref={pageContentRef}
        config={currentContent}
        actionClick={actionClick}
        headerRightArea={headerRightArea}
      >
        {renderTableCpn}
      </PageContent>
      <PageModal
        ref={pageModalRef}
        modalConfig={curModalConfig}
        onOk={onModalOk}
        onCancel={onModalCancel}
      >
        <div key="code" style={inputWithVerifyCodeStyle}>
          <Input name="code" />
          <VerifyCodeButton onClick={getCodeClick} />
        </div>
      </PageModal>
    </>
  )
}

export default memo(IntegralDetailList)
